<template>
  <div>

    <el-descriptions class="margin-top" title="" :column="3" :size="mini" border>
      <template slot="title">
        <div style="text-align: left;font-family:新宋体;height: 30px">
          <h1>管理员信息</h1>
        </div>
        <div style="text-align: left;position:relative;top: 0">
          <el-avatar class="avat" :src="this.form.avatar" ></el-avatar>
        </div>
      </template>

      <template slot="extra">
        <div style="position: relative;top: 60px;">
          <el-button type="primary" size="large" @click="dialogFormVisible = true">操作</el-button>
        </div>
      </template>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账号
        </template>
        {{form.userName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lock"></i>
          密码
        </template>
        {{form.password}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="fa fa-address-book-o" aria-hidden="false"></i>
          昵称
        </template>
        {{form.nickName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          角色
        </template>
        {{form.role}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-information"></i>
          最近登录IP
        </template>
        {{form.ip}}
      </el-descriptions-item>
    </el-descriptions>




    <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
      <el-form :model="dialog">
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="dialog.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="dialog.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="dialog.role" :placeholder="dialog.role" style="right: 15%">
            <el-option label="用户管理员" value="用户管理员"></el-option>
            <el-option label="博客管理员" value="博客管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" style="right: 40%">取消</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="updateDetail()">修改</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
    </el-dialog>
  </div>
  </template>


<script>
export default {
  name: "admin_detail",
  props: {
    ni_name: String
  },
  data(){
    return{
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        avatar:require('@/assets/img/管理员1号.jpg'),
        userName:'',
        nickName: '',
        role:'用户管理员',
        password:'123456',
        ip:'100.1.1.1',
      },
      dialog:{
        nickName: '',
        password: '',
        role:''
      },
      formLabelWidth: '120px',
    };
  },
  methods:{
    updateDetail(){
     this.dialogFormVisible = false;
     this.form=this.dialog;
      this.$message.success('修改成功!');
    }
  },
  created() {
    this.form.nickname=this.ni_name;
    console.log("34343:"+this.ni_name);
    console.log("form1111111: "+this.form)
    this.dialog = this.form;

  }
}
</script>

<style>
.avat{
  width: 90px;
  height: 90px;
}

/*弹出框*/
.el-dialog__title{
  font-size: 25px;
  color: #FFFFFF;
}
 .el-dialog .el-form-item__label{
  font-size: 20px;
  color: #FFFFFF;
}

</style>